<template>
  <div>
    <router-view></router-view>
    <div class="bottom-nav">
      <ul>
        <li class="home" :class="{active: homeActive}" @click="goPage('index')">
          <i></i>
          <p>首页</p>
        </li>
        <li class="cart" :class="{active: cartActive}" @click="goPage('cart')">
          <i></i>
          <p>购物车</p>
        </li>
        <li class="my" :class="{active: myActive}" @click="goPage('my')">
          <i></i>
          <p>我的</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      homeActive: true,
      cartActive: false,
      myActive: false,
    }
  },
  created () {
    this.changeActive(this.$route.name, this.$route.meta.title)
  },
  activated () {
    // 如果有缓存的话 必须要在activated这个勾子中再执行一次  created中的方法，否则缓存的数据不会生效
    this.changeActive(this.$route.name, this.$route.meta.title)
  },
  methods: {
    goPage (name) {
      this.$router.replace({ name: name })
    },
    changeActive (name, title) {
      switch (name) {
        case 'index':
          this.homeActive = true
          this.cartActive = false
          this.myActive = false
          break
        case 'cart':
          this.homeActive = false
          this.cartActive = true
          this.myActive = false
          break
        case 'my':
          this.homeActive = false
          this.cartActive = false
          this.myActive = true
          break
      }
      document.title = title
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 页面跳转时
    this.changeActive(to.name, to.meta.title)
    next()
  }
}
</script>

<style lang="scss" scoped>
  .bottom-nav {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    box-shadow: 0 0 10px #efefef;

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.5rem;
      height: 1.2rem;

      li {
        width: 1rem;

        i {
          display: block;
          width: 0.6rem;
          height: 0.6rem;
          margin: 0 auto;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }

        &.home i {
          background-image: url("../../../assets/images/home/main/home1.png");
        }

        &.home.active i {
          background-image: url("../../../assets/images/home/main/home2.png");
        }

        &.cart i {
          background-image: url("../../../assets/images/home/main/cart1.png");
        }

        &.cart.active i {
          background-image: url("../../../assets/images/home/main/cart2.png");
        }

        &.my i {
          background-image: url("../../../assets/images/home/main/my1.png");
        }

        &.my.active i {
          background-image: url("../../../assets/images/home/main/my2.png");
        }

        p {
          text-align: center;
          font-size: 0.28rem;
          line-height: 1.6em;
        }

        &.active p {
          color: #eb1625;
        }
      }
    }
  }
</style>
